<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>view事件的监听v-on</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 在我前端开发中，我们经常要做的事情，事件的监听，额就是要进行交互 -->
    <!-- 比如单击事件，双击事件，键盘的敲击，鼠标的滑动等等 -->
    <!-- 我们通过v-on来实现事件的监听 -->

    <!-- 绑定事件的监听器 v-on  语法糖 简写 @ 
        可以定义为 function | inline statement | object
        参数event
    -->

    <!-- v-on 绑定 DOM事件监听 -->
    <p>{{counter}}</p>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <p>----------------------------------</p>
    <!-- 一般来说我们用function -->

    <!-- 如果没有参数，可以省略括号，后台必须有一个参数的话，会传event参数 -->
    <!-- 如果有参数，必须带括号，必须传参，否则会传undefined -->
    <!-- 函数本身有一个默认参数event，无论你传不传参，都存在 -->
    <!-- 如果又想传自己的参数，又想传事件本身，可以在前台用$event传参或者后台直接用默认参数event -->

    <button @click="increase(1,$event)">+</button>
    <button @click="counter--">-</button>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
        counter:0
      },
      methods: {
        increase(a,b){
            //event 是一个默认参数，指代触发的事件
            console.log(a);
            console.log(b);
            this.counter++
        },
        decrease(){
            this.counter--
        }
      },
    })

  </script>
</body>
</html>